<template>
    <view>
        <form @submit="bindSubmit" report-submit>
            <view class="container">
                <view class="comment1-description">
                    <view class="star-pos" style="display: flex; flex-direction: row">
                        <view :class="'stars  ' + (flag >= 1 ? 'on' : '')" @tap="changeColor1"></view>
                        <view :class="'stars  ' + (flag >= 2 ? 'on' : '')" @tap="changeColor2"></view>
                        <view :class="'stars  ' + (flag >= 3 ? 'on' : '')" @tap="changeColor3"></view>
                        <view :class="'stars  ' + (flag >= 4 ? 'on' : '')" @tap="changeColor4"></view>
                        <view :class="'stars  ' + (flag >= 5 ? 'on' : '')" @tap="changeColor5"></view>
                    </view>
                </view>

                <!-- 文本域 -->
                <view class="weui-cells_after-title">
                    <view class="weui-cell">
                        <view class="weui-cell__bd">
                            <textarea
                                class="weui-textarea"
                                @input="bindTextAreaChange"
                                placeholder="我要评价..."
                                style="height: 8em"
                                :value="info"
                                :maxlength="noteMaxLen"
                                focus
                                name="content"
                            />
                            <view class="weui-textarea-counter">{{ noteNowLen }}/{{ noteMaxLen }}</view>
                        </view>
                    </view>
                </view>

                <!-- 发布按钮 -->
                <view class="btnSf">
                    <button formType="submit">发布</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Company } from '../../model/company-model.js';
var company = new Company();
export default {
    data() {
        return {
            imagelist: [],
            flag: 0,
            noteMaxLen: 300,

            // 最多放多少字
            info: '',

            noteNowLen: 0,

            //备注当前字数
            score: 0,

            id: 0,
            companyid: 0,
            ordertype: 0,
            show: 'none',
            imgs1: '',
            picture1: []
        };
    },
    onLoad: function (e) {
        var that = this;
        uni.setNavigationBarTitle({
            title: '我要评价'
        });
        that.id = e.id;
        that.companyid = e.companyid;
    },
    methods: {
        // 监听字数
        bindTextAreaChange: function (e) {
            var that = this;
            var value = e.detail.value;
            var len = parseInt(value.length);
            if (len > that.noteMaxLen) {
                return;
            }
            that.setData({
                info: value,
                noteNowLen: len
            });
        },

        // 提交清空当前值
        bindSubmit: function (e) {
            var that = this;
            var score = that.score;
            var content = e.detail.value.content;
            var pid = that.id;
            var companyid = that.companyid;
            /*
          if (content == '') {
            wx.showModal({
              title: '提示',
              content: '请输入评论内容',
              showCancel: false
            })
            return
      
          }
          */

            var params = {
                id: pid,
                type: 1,
                score: score,
                companyid: companyid,
                content: content
            };
            company.saveComment((data) => {
                uni.showModal({
                    title: '提示',
                    content: data.msg,
                    showCancel: false,
                    success: function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                });
                return;
            }, params);
        },

        changeColor1: function () {
            var that = this;
            that.score = 1;
            that.setData({
                flag: 1
            });
        },

        changeColor2: function () {
            var that = this;
            that.score = 2;
            that.setData({
                flag: 2
            });
        },

        changeColor3: function () {
            var that = this;
            that.score = 3;
            that.setData({
                flag: 3
            });
        },

        changeColor4: function () {
            var that = this;
            that.score = 4;
            that.setData({
                flag: 4
            });
        },

        changeColor5: function () {
            var that = this;
            that.score = 5;
            that.setData({
                flag: 5
            });
        },

        uploadimg: function (path) {
            var uploadurl = app.util.geturl({
                url: 'entry/wxapp/upload'
            });
            // var id = id;
            uni.showToast({
                icon: 'loading',
                title: '正在上传'
            });
            var that = this;
            uni.uploadFile({
                url: uploadurl,
                filePath: path,
                name: 'file',
                header: {
                    'Content-Type': 'multipart/form-data'
                },
                formData: {
                    //和服务器约定的token, 一般也可以放在header中
                    session_token: uni.getStorageSync('session_token')
                },
                success: function (res) {
                    var getdata = JSON.parse(res.data);
                    if (res.statusCode != 200) {
                        uni.showModal({
                            title: '提示',
                            content: '上传失败',
                            showCancel: false
                        });
                        return;
                    } else {
                    }
                    var imgpath = getdata.data.path;
                    that.imagelist.push(imgpath);
                },
                fail: function (e) {
                    uni.showModal({
                        title: '提示',
                        content: '上传失败',
                        showCancel: false
                    });
                },
                complete: function () {
                    uni.hideToast(); //隐藏Toast
                }
            });
        },

        chooseImg: function (e) {
            var that = this;
            uni.chooseImage({
                count: 3,
                // 默认9
                sizeType: ['compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths;
                    var imgs1 = that.imgs1;
                    imgs1 = [];
                    that.imagelist = [];
                    for (var i = 0; i < tempFilePaths.length; i++) {
                        if (imgs1.length >= 9) {
                            that.setData({
                                imgs1: imgs1
                            });
                            // return false;
                        } else {
                            imgs1.push(tempFilePaths[i]);
                        }
                    }
                    that.setData({
                        imgs1: imgs1,
                        show: 'block'
                    });
                    that.setData({
                        picture1: []
                    });
                    var tempFilePaths = that.imgs1;

                    // var uploadurl = app.util.geturl({ 'url': 'entry/wxapp/upload' });

                    for (var s = 0; s < tempFilePaths.length; s++) {
                        console.log(tempFilePaths[s]);
                        that.uploadimg(tempFilePaths[s]);
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        }
    }
};
</script>
<style>
/* weixinmao_house/pages/comment/index.wxss */

.comment1-description {
    padding: 30rpx 0;
    display: flex;
    flex-direction: row;
}
.stars {
    background: url('https://api.site100.cn/star_off.png');
    width: 50rpx;
    height: 50rpx;
    background-size: 50rpx 50rpx;
    margin-left: 30rpx;
    transition: 600ms;
}
.on {
    background: url('https://api.site100.cn/star_on.png');
    width: 50rpx;
    height: 50rpx;
    background-size: 50rpx 50rpx;
    transition: 1s;
    transform: scale(1, 1);
}
.weui-cells_after-title {
    width: 92%;
    margin: 0 auto;
    border: 1px solid #ddd;
}

.btnSf {
    width: 92%;
    margin: 30rpx auto;
}
.btnSf button {
    background: #3274e5;
    color: #fff;
}

.btnSf button:active {
    background: #3274e5;
    color: #fff;
}

.container .main {
    width: 700rpx;
    display: flex;
    flex-direction: column;
    padding-top: 20rpx;
}
.container .main .list {
    display: flex;
    width: 700rpx;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;
}
.container .main .list .title {
    width: 700rpx;
    color: #141c31;
    font-weight: bold;
    font-size: 1.1rem;
    align-self: left;
}

.container .main .list .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20rpx;
    width: 650rpx;
}

.noselect {
    background: #f8f8f9;
    color: #101d37;
    border-radius: 10rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 0.9rem;
    margin-right: 25rpx;
}

.selectcolor {
    background: #101d37;
    color: #f8f8f9;
    border-radius: 10rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 0.9rem;
    margin-right: 25rpx;
}

.container .main .list .title view:nth-child(2) {
    color: #9399a5;
    font-size: 0.7rem;
    font-weight: 300;
    margin-top: 10rpx;
}

.container .main .list .item .uploadimg {
    width: 300rpx;
    height: 300rpx;
    border-radius: 5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .main .list .item .uploadimg image {
    width: 120rpx;
    height: 120rpx;
}
.container .main .list .item .uploadimg .uploadtitle {
    color: #9399a5;
    font-size: 0.7rem;
}

.container .main .list view inputtitle {
    color: #151c2e;
    font-size: 0.8rem;
    width: 200rpx;
}

.container .main .list .inputlist {
    width: 700rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border-bottom: 1rpx solid #e6e6e6;
    padding-top: 50rpx;
    padding-bottom: 50rpx;
}

.container .main .list .inputlist input {
    margin-left: 20rpx;
    width: 430rpx;
}
.container .main .list .inputlist .inputlabel {
    color: #949ba5;
}
.container .main .list .inputlist .picker {
    color: #949ba5;
    margin-left: 50rpx;
}

.radio-group {
    color: #949ba5;
    margin-left: 50rpx;
}

.imgsbox {
    width: 690rpx;
    padding: 20rpx;
    margin: auto;
    background: #fff;
    border-radius: 0 0 14rpx 14rpx;
    border: 1px solid #d6d7dc;

    box-sizing: border-box;
    overflow: hidden;
}
.weui-cells {
    font-size: 30rpx !important;
}

.weui-cell::before {
    border-top: 1rpx solid #eee;
}
.upload-img-btn image {
    width: 185rpx;
    height: 185rpx;
}
.upload-img-btn {
    float: left;
}
.img {
    width: 185rpx;
    height: 185rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden;
}

.imgvideo {
    width: 665rpx;
    height: 485rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden;
}
.delete-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    width: 100%;
}
.img image {
    width: 185rpx;
    height: 185rpx;
}
.weui-select {
    border-right: none;
}
.weui-uploader__hd {
    float: left;
}
.weui-uploader__title {
    width: 150rpx !important;
}
.weui-label {
    width: 150rpx !important;
}
.upload-img-btn image {
    margin: 10rpx;
}
</style>
